<template>
  <div class="topMenu">
    <span>{{ tableName }}</span>
    <div class="topMenu_group" v-for="(item, index) in buttons" :key="index">
      <el-divider direction="vertical"></el-divider>
      <div :class="['topMenu_box', item.isDisabled ? 'disabled' : 'normal']" @click="btnClick(index)">
        <i :class="item.icon"></i>
        <span class="icon-text">{{ item.label }}</span>
      </div>
    </div>
    <div class="topMenu_group" v-for="(item, index) in slotBtns" :key="index">
      <el-divider direction="vertical"></el-divider>
      <div :class="['topMenu_box', item.isDisabled ? 'disabled' : 'normal']" @click="$emit('result', index)">
        <i :class="item.icon"></i>
        <span class="icon-text">{{ item.label }}</span>
      </div>
    </div>
    <!-- <div class="topMenu_group">
      <el-divider direction="vertical"></el-divider>
      <div :class="['topMenu_box',hideColBtn?'disabled':'normal']">
        <el-dropdown :hide-on-click="false" :disabled="hideColBtn">
          <span>
            <i class="el-icon-s-operation"></i>
            <span class="icon-text">{{ getLabel('筛选列','export')}}</span>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item,index) in checkGroupBox" :key="index">
                <el-checkbox v-model="item.hide" @change="changeBox">
                  <div class="checkboxDiv">{{item.label}}</div>
                </el-checkbox>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div> -->
    <!-- class="topMenu_box" v-if="hideColBtn" -->
    <!-- 筛选列 -->
    <!-- <div class="topMenu_group">
      <el-divider direction="vertical"></el-divider>
      <div :class="['topMenu_box', rowIndex == 0 ? 'disabled' : 'normal']" @click="rowTurning('prev')">
        <i class="iconfont icon-xiangxiajiantoucuxiao"></i>
      </div>
    </div>
    <div class="topMenu_group">
      <el-divider direction="vertical"></el-divider>
      <div :class="['topMenu_box', rowIndex >= tableData.length - 1 ? 'disabled' : 'normal']" @click="rowTurning('next')">
        <i class="iconfont  icon-xiangshangjiantoucuxiao"></i>
      </div>
    </div> -->
    <el-divider direction="vertical"></el-divider>
    <div :class="['translate', openTurning || 'disabled']">
      <span :class="pages.currentPage != 1 || 'disabled'" @click="pageTurning('start')"><i
          class="iconfont icon-jiantou_shangyiye_o"></i></span>
      <span :class="pages.currentPage != 1 || 'disabled'" @click="pageTurning('prev')"><i
          class="iconfont icon-zuojiantou"></i></span>
      <span>第</span>
      <div v-if="openTurning">
        <div style="width: 50px;">
          <el-input-number size="mini" style="width: 100%;" v-model="pages.currentPage" :controls="false"
            @keyup.enter.native="getList('page')">
          </el-input-number>
        </div>
      </div>
      <span class="disabled" v-else>{{ pages.currentPage }}</span>
      <span v-if="openTurning">页/{{ pages.pageSize }}个(共{{ pages.total }}个)</span>
      <span v-else class="disabled">页/{{ tableData.length }}个(共{{ tableData.length }}个)</span>
      <span
        :class="pages.total < pages.pageSize ? 'disabled' : pages.currentPage == Math.ceil(pages.total / pages.pageSize) ? 'disabled' : ''"
        @click="pageTurning('next')">
        <i class="iconfont icon-youjiantou"></i>
      </span>
      <span
        :class="pages.total < pages.pageSize ? 'disabled' : pages.currentPage == Math.ceil(pages.total / pages.pageSize) ? 'disabled' : ''"
        @click="pageTurning('end')">
        <i class="iconfont icon-jiantou_xiayiye_o"></i>
      </span>
    </div>
    <hideColumn :show.sync="drawer" :list="list"></hideColumn>
  </div>
</template>

<script>
import hideColumn from './hideColumn/hideColumn.vue'
export default {
  components: {
    hideColumn,
  },
  data() {
    return {
      drawer: false,
      list: [],
      queryType: 'rest',
      checkGroupBox: [],
      page: {},
    }
  },
  props: {
    tableName: {
      type: String,
      default: '无',
    },
    filterBtn: {
      type: Boolean,
      default: true,
    },
    searchBtn: {
      type: Boolean,
      default: true,
    },
    clearBtn: {
      type: Boolean,
      default: true,
    },
    exportBtn: {
      type: Boolean,
      default: true,
    },
    hideColBtn: {
      type: Boolean,
      default: true,
    },
    openTurning: {
      type: Boolean,
      default: true,
    },
    //是否打开过滤器
    filter: {
      type: Boolean,
      default: false,
    },
    //行数
    rowIndex: {
      type: Number,
      default: 0,
    },
    //页码
    pages: {
      type: Object,
      default: () => { },
    },
    listTableOption: {
      type: Object,
      default: () => { },
    },
    hideList: {
      type: Array,
      default: () => [],
    },
    //表格数据
    tableData: {
      type: Array,
      default: () => [],
    },
    //自定义按钮
    slotBtns: {
      type: Object,
      default: () => { },
    },
  },
  watch: {
    list: { //监听的对象
      deep: true, //深度监听设置为 true
      handler(newV, oldV) {
        console.log(newV);
        newV.forEach((val, index) => {
          this.$set(this.listTableOption.column[index], 'hide', val.hide);
          this.$set(this.listTableOption.column[index], 'fixed', val.fixed);
          this.$set(this.listTableOption.column[index], 'sortable', val.sortable);
        })
      }
    }
  },
  computed: {
    buttons() {
      let btns = {
        'filter': {
          label: '筛选',
          icon: 'iconfont icon-shaixuan',
          isShow: this.filterBtn,
          isDisabled: !this.filterBtn,
        },
        'search': {
          label: '搜索',
          icon: 'iconfont icon-sousuo',
          isShow: this.searchBtn,
          isDisabled: !this.searchBtn,
        },
        'clear': {
          label: '清除字段',
          icon: 'iconfont icon-qingchu',
          isShow: this.clearBtn,
          isDisabled: !this.clearBtn,
        },
        'refresh': {
          label: '刷新',
          icon: 'iconfont icon-shuaxin',
          isShow: true,
          isDisabled: false,
        },
        'export': {
          label: '下载',
          icon: 'iconfont icon-icon-xiazai',
          isShow: this.exportBtn,
          isDisabled: !this.exportBtn,
        },
        'hideColumn': {
          label: '列显隐',
          icon: 'el-icon-s-operation',
          isShow: this.hideColBtn,
          isDisabled: !this.hideColBtn,
        },
      };
      return btns;
    },
  },
  mounted() {
    if (this.listTableOption && this.listTableOption.column) {
      this.listTableOption.column.forEach((val, index) => {
        this.list.push({
          label: val.label,
          prop: val.prop,
          hide: val.hide,
          fixed: false,
          sortable: false,
        });

        // this.checkGroupBox.push({
        //   label:val.label,
        //   prop:val.prop,
        //   hide:val.hide?false:true,
        // })
      })
    }
    this.page = JSON.parse(JSON.stringify(this.pages));
  },
  methods: {
    btnClick(btn) {
      if (this.buttons[btn].isDisabled) {
        return;
      }
      switch (btn) {
        case 'filter': this.$emit('update:filter', !this.filter); break;
        case 'search': this.getList('get'); break;
        case 'clear': this.$emit('clearForm'); break;
        case 'refresh': this.getList('rest'); break;
        case 'export': this.$emit('exportList'); break;
        case 'hideColumn': this.drawer = true; break;
      }
      console.log(this.drawer);
    },
    changeBox() {
      // console.log('变化');
      this.$emit('update:hideList', this.checkGroupBox)
    },
    //翻页
    pageTurning(val) {
      if (!this.openTurning) { return }
      if (val == 'next') {
        if (this.pages.currentPage < (Math.ceil(this.pages.total / this.pages.pageSize))) {
          this.pages.currentPage++;
          this.returnFun();
        }
      } else if (val == 'prev') {
        if (this.pages.currentPage > 1) {
          this.pages.currentPage--;
          this.returnFun();
        }
      } else if (val == 'start') {
        if (this.pages.currentPage > 1) {
          this.pages.currentPage = 1;
          this.returnFun();
        }
      } else {
        if (this.pages.currentPage < (Math.ceil(this.pages.total / this.pages.pageSize))) {
          this.pages.currentPage = Math.ceil(this.pages.total / this.pages.pageSize);
          this.returnFun();
        }
      }
    },
    //选中行
    rowTurning(val) {
      if (!this.openTurning) { return }
      if (val == 'next') {
        if (this.tableData.length - 1 > this.rowIndex) this.$emit('update:rowIndex', this.rowIndex + 1);
      } else {
        if (this.rowIndex > 0) this.$emit('update:rowIndex', this.rowIndex - 1);
      }
      this.$emit('setCurrentRow');
    },
    //更新数据
    getList(type) {
      if (this.pages.currentPage > this.pages.total / this.pages.pageSize) {
        this.pages.currentPage = Math.ceil(this.pages.total / this.pages.pageSize);
      } else if (this.pages.currentPage < 1) {
        this.pages.currentPage = 1;
      }
      if (type != 'page') {
        for (let key in this.pages) {
          this.pages[key] = this.page[key];
        }
        // this.pages.total = 0;
        // this.pages.currentPage = 1;
        // this.pages.pageSize = 20;
      }
      this.queryType = type;
      this.returnFun();
    },
    returnFun() {
      console.log('获取数据');
      this.$emit('getList', this.queryType);
      this.$emit('update:rowIndex', 0);
      this.$emit('setCurrentRow');
    },
    handleClose() {

    },
  },
}
</script>

<style lang="scss" scoped>
// /deep/.el-input__inner {
//   width: 50px;
// }

.checkboxDiv {
  padding: 5px 10px 5px 0;
}

.topMenu {
  display: flex;
  align-items: center;
  padding: 10px 10px;
  background-color: #f5f5f5;

  .topMenu_group {
    display: flex;
    align-items: center;

    .topMenu_box {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .icon-text {
        margin-left: 5px;
        font-size: 15px;
        color: #303133;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      i {
        color: #429DFF;
        font-size: 22px !important;
      }
    }
  }

  .translate {
    display: flex;
    justify-content: space-evenly;
    align-items: center !important;

    span,
    div {
      margin-right: 8px;
    }

    i {
      color: #429DFF;
      font-size: 22px !important;
    }
  }
}

.normal:hover {
  cursor: pointer;

  .icon-text {
    color: #429DFF !important;
  }
}

.disabled {
  color: #bdbdbd;

  i {
    color: #bdbdbd !important;
  }

  span {
    color: #bdbdbd !important;
  }
}


::v-deep .el-input-number--mini,
.el-input-number {
  width: 100% !important;
}

.el-dropdown-menu--medium .el-dropdown-menu__item {
  padding: 0;
}

.el-checkbox {
  padding: 6px 0px 6px 22px;
  margin-right: 0;
}

@media only screen and (max-width: 1300px) {
  .topMenu_box {
    .icon-text {
      display: none !important;
    }
  }
}
</style>
 